import React, { Component } from 'react';
import { View, Text, StyleSheet, Alert, TextInput ,Keyboard} from 'react-native';
import { connect } from 'react-redux'
import { Colors, AppStyles } from '../../style'
import EditText from '../../common/components/EditText';
import { Button } from 'antd-mobile-rn';
import { NavigationActions, createAction } from '../../common/utils';
import { isEmail, isPhone } from '../../common/utils/RegUtil';

phone = '';
pwd = '';
rPwd = '';

@connect(({ user}) => ({user}))
export default class Register extends Component {

    static navigationOptions = {
        title: '注册'
    }


    constructor(props) {
        super(props)
        this.state = {
            loading: false,
            phoneError: false,
            pwdError: false,
            rPwdError: false,
        }
    }

    _isPhone() {
        error = !isPhone(phone);
        console.log(error);
        this.setState({
            phoneError: error
        })
    }

    _pwd() {
        error = pwd.length == 0;
        console.log(error);
        this.setState({
            pwdError: error
        })
    }

    _rPwd() {
        error = pwd == rPwd;
        console.log(!error);
        this.setState({
            rPwdError: !error
        })
    }

    componentWillReceiveProps() {
        if (this.props.user.registerError) {
            this.setState(
                { loading: false },
                () => {
                    Alert.alert(this.props.user.registerErrorMsg);
                }
            )
        }
    }

    render() {
        return (<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: Colors.white }}>
            <View style={styles.background}>
                <View style={styles.block} />
                <Text style={AppStyles.mediumTextStyle}>手机号</Text>
                {this.state.phoneError && <Text style={[AppStyles.smallTextStyle, { color: Colors.red, fontSize: 10 }]}>请输入正确的手机号</Text>}
                <View style={styles.textinput}>
                    <TextInput style={styles.subTextInpput} placeholder={'请输入手机号'} clearButtonMode={'always'} keyboardType='phone-pad'
                        onChangeText={(text) => { phone = text.trim() }}
                        onEndEditing={() => {
                            error = !isPhone(phone);
                            this.setState({
                                phoneError: error
                            })
                        }}
                    />
                </View>
                <View style={styles.block} />
                <Text style={AppStyles.mediumTextStyle}>密码</Text>
                {this.state.pwdError && <Text style={[AppStyles.smallTextStyle, { color: Colors.red, fontSize: 10 }]}>密码不能为空</Text>}
                <View style={styles.textinput}>
                    <TextInput style={styles.subTextInpput} placeholder={'请输入密码'} secureTextEntry={true} clearButtonMode={'always'}
                        onChangeText={(text) => { pwd = text.trim() }}
                        onEndEditing={() => {
                            error = pwd.length == 0;
                            this.setState({
                                pwdError: error
                            })
                        }}
                    />
                </View>
                <View style={styles.block} />
                <Text style={AppStyles.mediumTextStyle}>重复密码</Text>
                {this.state.rPwdError && <Text style={[AppStyles.smallTextStyle, { color: Colors.red, fontSize: 10 }]}>密码不一致</Text>}
                <View style={styles.textinput}>
                    <TextInput style={styles.subTextInpput} placeholder={'请重复密码'} secureTextEntry={true} clearButtonMode={'always'}
                        onChangeText={(text) => { rPwd = text.trim() }}
                        onEndEditing={() => {
                            error = pwd == rPwd;
                            console.log(pwd.rPwd);
                            this.setState({
                                rPwdError: !error
                            })
                        }}
                    />
                </View>
                <View style={styles.block} />
                <Button style={{ borderColor: Colors.black, borderWidth: 1, borderRadius: 15 }}
                    size={'large'}
                    loading={this.state.loading}
                    onClick={() => {
                        Keyboard.dismiss()
                        this._isPhone();
                        this._pwd();
                        this._rPwd();
                        // if (isPhone(phone) && pwd.length > 0 && rPwd == pwd) {
                        //     this.setState({
                        //         loading: true
                        //     })
                        //     this.props.dispatch(createAction('user/register')({
                        //         "phone": phone, "password": pwd
                        //     }))
                        // } else {
                        //     Alert.alert('请输入正确信息');
                        // }
                        this.props.dispatch(NavigationActions.navigate({ routeName: 'CompleteInfo' }))
                    }}
                >
                    <Text style={AppStyles.bigTextStyle}>注册</Text>
                </Button>
            </View>
        </View>)
    }
}

const styles = StyleSheet.create({
    background: {
        borderColor: Colors.black,
        borderRadius: 10,
        borderWidth: 1.0,
        width: 300,
        padding: 10
    },
    block: {
        height: 10
    },
    textinput: {
        borderColor: Colors.black,
        borderRadius: 5,
        borderWidth: 1.0,
        flexDirection: 'row',
        alignItems: 'center'
    },
    subTextInpput: {
        width: 250,
        padding: 0,
        height: 30
    },
})